<template>
    <div>
        <!-- 导航头部 -->
        <div class="ls-card" v-if="cType !== 'dialog'">
            <el-page-header @back="$router.go(-1)" :content="mode == 'add' ? '添加视频' : '编辑视频'" />
        </div>
        <div class="ls-User__centent ls-card m-t-16">
            <el-form label-width="120px" size="small" ref="formRef" :model="form" :rules="formRules">
                <el-form-item label="视频标题:" prop="title" required>
                    <el-input v-model="form.title" :disabled="disabled" />
                </el-form-item>
                <el-form-item label="视频分类:" prop="category_id" required>
                    <el-select
                        placeholder="选择分类"
                        size="large"
                        v-model="form.category_id"
                        @visible-change="getCategoryList"
                    >
                        <el-option
                            v-for="item in categoryList"
                            :key="item.id"
                            :label="item.category_name"
                            :value="item.id"
                            :disabled="disabled"
                        />
                    </el-select>
                </el-form-item>

                <el-form-item label="视频地区:" prop="area_id" required>
                    <el-select placeholder="选择区域" size="large" v-model="form.area_id" @visible-change="getAreaList">
                        <el-option
                            v-for="item in areaList"
                            :key="item.id"
                            :label="item.category_name"
                            :value="item.id"
                            :disabled="disabled"
                        />
                    </el-select>
                </el-form-item>

                <el-form-item label="视频背景图:" prop="image" required>
                    <material-select :limit="1" v-model="form.image" :disabled="disabled" />
                    <div class="flex">
                        <div class="muted xs m-r-16">建议尺寸：100*100像素，jpg，jpeg，png图片类型</div>
                    </div>
                </el-form-item>
                <el-form-item label="视频年份:" prop="year" required>
                    <el-date-picker
                        v-model="form.year"
                        type="year"
                        @change="changes"
                        placeholder="选择时间"
                        format="yyyy"
                        value-format="yyyy"
                    />
                </el-form-item>

                <el-form-item label="共多少集:" prop="number" required>
                    <el-input v-model="form.number" :disabled="disabled" />
                </el-form-item>
                <el-form-item label="普通会员价:" prop="price" required>
                    <el-input v-model="form.price" :disabled="disabled" />
                </el-form-item>
                <el-form-item label="vip会员价:" required>
                    <el-input v-model="form.vip_price" :disabled="disabled" />
                </el-form-item>
                <el-form-item label="是否推荐:" required>
                    <el-radio :label="1" v-model="form.is_recommend" :disabled="disabled">推荐</el-radio>
                    <el-radio :label="2" v-model="form.is_recommend" :disabled="disabled">不推荐</el-radio>
                </el-form-item>
                <el-form-item label="是否分销:" required>
                    <el-radio :label="1" v-model="form.is_distribution" :disabled="disabled">分销</el-radio>
                    <el-radio :label="2" v-model="form.is_distribution" :disabled="disabled">不分销</el-radio>
                </el-form-item>
                <el-form-item label="身份设置可观看:" required>
                    <el-checkbox-group v-model="form.distribution_level_ids">
                        <el-checkbox v-for="item in distributionLevelList" :key="item.id" :label="item.id">
                            {{ item.name }}</el-checkbox
                        >
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="视频介绍:" prop="introduction" required class="form-edit">
                    <!-- <el-input v-model="form.introduction" :disabled="disabled" /> --> 
                    <!-- <editor v-model="form.introduction" lazy width="600" height="300"/> -->
                    <editor v-model="form.introduction" width="375" />
                </el-form-item>
                <el-form-item label="点赞:">
                    <el-input v-model="form.like_count" :disabled="disabled" />
                </el-form-item>
                <el-form-item label="转发:">
                    <el-input v-model="form.transmit_count" :disabled="disabled" />
                </el-form-item>
                <el-form-item label="浏览量:">
                    <el-input v-model="form.view_count" :disabled="disabled" />
                </el-form-item>
            </el-form>
        </div>
        <!-- 底部保存或取消 -->
        <div class="bg-white ls-fixed-footer" v-if="cType !== 'dialog'">
            <div class="row-center flex" style="height: 100%">
                <el-button size="small" @click="$router.go(-1)">取消</el-button>
                <el-button size="small" type="primary" @click="onSubmit()" :disabled="disabled">添加</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch, Ref } from 'vue-property-decorator'
import { State } from 'vuex-class'
import MaterialSelect from '@/components/material-select/index.vue'
import Editor from '@/components/editor.vue'
import { PageMode } from '@/utils/type'
import { videoClassificationlist } from '@/api/visionapi/type'
import { joinDistributionLevel, addvisionlist, joinModifyVideoDetail } from '@/api/visionapi/index'
import {
    IVideoAddForm,
    ICategoryItem,
    IDistributionLevelItem,
    IFormDistributionLevelItem
} from './video.interface'

import { STATIC_INFO } from './const'


@Component({
    components: {
        MaterialSelect,
        Editor
    }
})
export default class VideoDetail extends Vue {
    @Ref() readonly formRef!: Element
    @Prop() value: any
    @Prop({ default: 'def' }) cType!: string // 自定义类别，def 表示，通过 路由跳转过来的，dialog 表示弹窗进来的
    @Prop({ default: PageMode.ADD }) mode!: string
    @Prop({
        default() {
            return {}
        }
    })
    editInfo!: IVideoAddForm | null
    @State(state => state.details?.formInfo) detailsFormInfo: any
    @State('user') user: any
    localMode: string = PageMode.ADD
    form: IVideoAddForm = {
        ...STATIC_INFO
    }
    formRules = {
        title: [
            {
                required: true,
                message: '请填写标题',
                trigger: 'blur'
            }
        ],
        category_id: [
            {
                required: true,
                message: '请填写分类',
                trigger: 'blur'
            }
        ],
        area_id: [
            {
                required: true,
                message: '请填写区域',
                trigger: 'blur'
            }
        ],
        image: [
            {
                required: true,
                message: '请上传视频背景图',
                trigger: 'blur'
            }
        ],
        year: [
            {
                required: true,
                message: '请选择视频年份',
                trigger: 'blur'
            }
        ],
        number: [
            {
                required: true,
                message: '请填写集数',
                trigger: 'blur'
            }
        ],
        price: [
            {
                required: true,
                message: '请填写普通会员价',
                trigger: 'blur'
            }
        ],
        vip_price: [
            {
                required: true,
                message: '请填写VIP会员价',
                trigger: 'blur'
            }
        ],
        introduction: [
            {
                required: true,
                message: '请填写视频介绍',
                trigger: 'blur'
            }
        ]
    }
    categoryList: ICategoryItem[] = []
    areaList: ICategoryItem[] = []
    distributionLevelList: IDistributionLevelItem[] = []
    yearsToNow = []
    disabled = false //是否禁用 查看详情时禁用
    @Watch('mode')
    onChangeMode(v: string) {
        this.localMode = v
    }

    created() {
        // 如果是查看的话，所有的表单都不能编辑, query 拿到的数据，一定是个字符串。
        this.disabled = this.$route.query.disabled === 'null' ? true : false
        if (this.$route.query.mode) {
            this.$emit('update:mode', this.$route.query.mode || PageMode.ADD)
        }
        this.localMode = this.mode
       
    }
    mounted() {
        this.initFormInfo()
        this.joinDistributionLevelHandler()
        this.getCategoryList()
        this.getAreaList()
    }
    initFormInfo() {
        const formInfo = this.editInfo || this.form
        if (this.localMode === PageMode.ADD) {
            this.form = {
                ...STATIC_INFO
            }
            return
        }
        this.$nextTick(() => {
            this.form = Object.assign({}, STATIC_INFO, formInfo, {
                year: String(formInfo.year),
                distribution_level_ids:
                    formInfo.video_distribution_level &&
                    formInfo.video_distribution_level.map((item: IFormDistributionLevelItem) => {
                        return item.distribution_level_id
                    })

            })
        })
    }
    // 请求到的分销列表数据
    joinDistributionLevelHandler() {
        joinDistributionLevel({})
            .then(res => {
                const lists = res.lists || []
                this.distributionLevelList = lists
            })
            .catch(err => {
                this.distributionLevelList = []
            })
    }
    onVideoChange(e: any) {}
    changes(e: any) {}
    // 获取短剧分类的列表
    getCategoryList() {
        videoClassificationlist({
            type: 3
        })
            .then((res: any) => {
                this.categoryList = res.lists
            })
            .catch(() => {
                this.categoryList = []
            })
    }
    // 获取短剧区域的列表
    getAreaList() {
        videoClassificationlist({
            type: 1
        })
            .then((res: any) => {
                this.areaList = res.lists
            })
            .catch(() => {
                this.areaList = []
            })
    }
    // 添加
    $refs!: {
        formRef: any
    }
    // 提交
    onSubmit() {
        this.$refs.formRef.validate((valid: boolean): any => {
            if (!valid) {
                return
            }

            // 请求发送
            switch (this.localMode) {
                case PageMode.ADD:
                    // 添加
                    return this.handleUserLevelAdd()
                case PageMode.EDIT:
                // 编辑
                return this.joinModifyVideoDetailHandler()
            }
        })
    }
    // 添加短剧
    handleUserLevelAdd() {
        // 传参
         const vm = this
        addvisionlist(this.form)
            .then(res => {
                vm.successHandler()
            })
            .catch((err: Error) => {})
    }
    joinModifyVideoDetailHandler() {
        const vm = this
        joinModifyVideoDetail(this.form).then(() => {
           vm.successHandler()
        }).catch((err: Error) => {

        })
    }
    successHandler() {
        const vm = this
        if (this.cType === 'dialog') {
            this.$emit("success")
            return 

        }
        setTimeout(() => {
            vm.$router.push({
                name: 'videoList'
            })
        }, 500)
    }
}
</script>
<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
